<template>
  <div>
    <div style="cursor: pointer;background-color: rgba(252, 212, 18, 0.3);min-height:55px;line-height:55px;padding-top:5px;" v-if="values.includes('1')">
      <img src="@/assets/images/budabiao.png" style="width:20px;height:20px;" />
    </div>
    <div style="cursor: pointer;background-color: rgba(252, 212, 18, 0.3);min-height:55px;line-height:55px;padding-top:5px;" v-else-if="values.includes('2')">
      <img src="@/assets/images/dodabiao.png" style="width:20px;height:20px;" />
    </div>
    <div style="cursor: pointer;min-height:55px;line-height:55px;padding-top:5px;text-align: center" v-else-if="values.includes('4')">
      -
    </div>
    <div style="cursor: pointer;min-height:55px;line-height:55px;padding-top:5px;" v-else>
      <img src="@/assets/images/dabiao.png" style="width:20px;height:20px;" />
    </div>
  </div>
</template>

<script>
export default {
  name: "TickCross",
  props: {
    value: [Number, String, Array],
  },
  computed: {
    values() {
      if (this.value !== null && typeof this.value !== 'undefined') {
        return Array.isArray(this.value) ? this.value : [String(this.value)];
      } else {
        return [];
      }
    },
  },
};
</script>
<style scoped></style>
